import React, { useState } from 'react';
import { Tabs } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { deltabitemState } from '../../store/slice/tabslice';
import TabPane from 'antd/es/tabs/TabPane';
import LoginPage from '../../pages/LoginPage';


const TabCmpt = (props) => {
    const [activeKey, setActiveKey] = useState("");
    const onChange = (key) => {
        setActiveKey(key);
    };
    const onEdit = (targetKey, action) => {
        // console.log(action);
        if (action === 'remove') {
            dispatch(deltabitemState({
                key: targetKey

            }))
        }
    };
    const dispatch = useDispatch();
    const tabitem = useSelector(state => state.tabpara);
    return (
        //如果本地的state有值，说明是由于tab标签来回切换的操作，所以激活页面的key为activeKey，否则就是添加tab标签的操作，用父组件MainCmpt传递的值来当作激活key
  
        <Tabs activeKey={activeKey === "" ? props.activateitem : activeKey} hideAdd type="editable-card" defaultActiveKey="1" items={tabitem} onEdit={onEdit} onChange={onChange} />
    )
}

export default TabCmpt
